<template>
  <view>
    <view class="w100 flex-center mt-30">
      <image style="width: 600rpx;height: 400rpx;" src='../../static/images/home/Component 1.png' mode=""></image>
    </view>
    <view class="mt-90 w100 flex-center">
      <!-- <image style="width: 400rpx;height: 400rpx;" :src="qrcode" mode="aspectFill"></image> -->
      <canvas style="width: 400rpx; height: 400rpx;" canvas-id="qrcode" id="qrcode"></canvas>
    </view>
    <view class="w100 flex-center s1 mt-90" style="font-size: 40rpx;font-weight: 400;color: #fff;">
      邀请好友成功获得空投10个代币
    </view>
    <view class="w100  " style="position: fixed;bottom: 100rpx;">
      <view class="but flex-center" @click="saveImage">
        保存图片
      </view>
    </view>
  </view>
</template>

<script>
  import UQRCode from 'uqrcodejs';
  export default {
    data() {
      return {
        qrcode: ''
      }
    },

    methods: {
      saveImage() {
        uni.canvasToTempFilePath({
          canvasId: 'qrcode',
          success: (res) => {
            // 在H5平台下，tempFilePath 为 base64
            console.log(res.tempFilePath)
            // #ifdef APP
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath
            })
            // #endif

            // #ifdef H5
            const aEle = document.createElement('a');
            aEle.download = 'shareCode' + new Date().getTime(); // 设置下载的文件名，默认是'下载'
            aEle.href = res.tempFilePath;
            document.body.appendChild(aEle);
            aEle.click();
            aEle.remove();
            // #endif
          }
        })
      },
      loadQrcode(link) {
        // 获取uQRCode实例
        var qr = new UQRCode();
        // 设置二维码内容
        qr.data = link;
        // 设置二维码大小，必须与canvas设置的宽高一致
        qr.size = 200;
        qr.margin = 10;
        // 调用制作二维码方法
        qr.make();
        // 获取canvas上下文
        var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
        // 设置uQRCode实例的canvas上下文
        qr.canvasContext = canvasContext;
        // 调用绘制方法将二维码图案绘制到canvas上
        qr.drawCanvas();
      }
    },
    onReady() {
      let sharecode = this.userInfo.share_code
      if (!this.userInfo || !sharecode) {
        this.$http.toLogin()
        return
      }
      let link = ''
      // #ifdef H5 
      let domain = window.location.toString().split('/#/')[0]
      link = `${domain}/#/pages/login/login_old?sharecode=${sharecode}`
      console.log('link: ', link);
      // #endif
      // #ifdef APP-NVUE||APP
      link = `ytbapp://sharecode=${sharecode}`
      // #endif
      this.loadQrcode(link)


    },
    onLoad(option) {
      if (option.sharecode) {
        uni.setStorageSync('sharecode', option.sharecode)
        this.$tools.jumpTo('/pages/index/index', 2)
      }
    },
  }
</script>

<style>
  page {
    background-color: #1E2240;
    padding: 30rpx 50rpx;
  }

  .s1 {
    font-size: 28rpx;
    font-weight: 400;
    color: rgba(165, 167, 179, 1);
  }

  .but {
    width: 654rpx;
    height: 112rpx;
    opacity: 1;
    border-radius: 28rpx;
    background: #2972FF;
    font-size: 36rpx;
    font-weight: 400;
    color: #fff;
  }
</style>